<template>
  <div>
    <div class="pre-box">
      <div class="ifnormal">
        <component :is="lists[index].componentName" :list="lists[index]">
        </component>
      </div>
    </div>
    <div class="page-content">
      <el-button @click="backTo">返回</el-button>
      <el-button @click="changePre" :disabled="index === 0">上一页</el-button>
      <el-button
        @click="changeNext(index)"
        :disabled="index === lists.length - 1"
        >下一页</el-button
      >
      <span style="margin-left: 10px">共{{ lists.length }}页</span>
    </div>
  </div>
</template>

<script>
import LargeScreen from './thumbnailComponents/LargeScreen'
import modules from './thumbnailComponents/exportModel.js'
import html2canvas from 'html2canvas'
import { base64ToBlob, blobToFile } from '@/utils/util.js'
import { meetingUpload } from '@/apis/bigModel.js'

export default {
  components: {
    LargeScreen,
    ...modules
  },
  data() {
    return {
      // lists: [
      //   {
      //     componentName: ''
      //   }
      // ],
      index: 0,
      imgList: []
    }
  },
  props: {
    lists: {
      type: Array
    },
    meetingBegin: {
      type: Boolean,
      default: false
    }
  },
  // watch: {
  //   index: {
  //     handler: function (n, o) {
  //       if (this.meetingBegin) {
  //         this.$nextTick(() => {
  //           const iframes = document.getElementsByClassName('screenIframe')
  //           if (iframes.length > 0) {
  //             iframes[0].onload = () => {
  //               setTimeout(() => {
  //                 this.catchModel(n)
  //               }, 10000)
  //             }
  //           } else {
  //             this.catchModel(n)
  //           }
  //         })
  //       }
  //     },
  //     immediate: true
  //   }
  // },
  mounted() {
    // this.lists = JSON.parse(localStorage.getItem('bigViewsLists'))
    // this.$nextTick(() => {
    //   setTimeout(() => {
    //     this.toggleFullscreen()
    //   }, 100)
    // })
  },
  methods: {
    catchModel(index) {
      const element = document.getElementsByClassName('pre-box')[0]
      const _this = this
      html2canvas(element, { useCORS: true }).then(async (canvas) => {
        const base64Data = canvas.toDataURL('image/jpg')
        const blob = base64ToBlob(base64Data, 'image/jpg')
        const file = blobToFile(blob, `${index + 1}.jpg`)

        if (_this.imgList.length < _this.lists.length) {
          if (!_this.imgList.some((item) => item.name === file.name)) {
            _this.imgList.push(file)
            const fd = new FormData()
            fd.append('files', file)
            fd.append('id', _this.lists[0].meetingId)
            let res = await meetingUpload(fd)
            console.log(res)
          }
        }
      })
    },
    changePre() {
      if (this.index > 0) {
        this.index--
      } else {
        this.index = 0
      }
    },
    async saveModel() {
      const fd = new FormData()
      this.imgList.forEach((file) => {
        fd.append('files', file)
      })
      fd.append('id', this.lists[0].meetingId)
      let res = await meetingUpload(fd)
      if (res.code != 200) {
        console.log(res.data)
      }
    },
    backTo() {
      this.$emit('backTemplate')
    },
    changeNext() {
      this.index++
    },
    toggleFullscreen() {
      const elem = document.documentElement // 通常使用<html>元素来请求全屏
      if (!document.fullscreenElement) {
        // 如果当前不是全屏状态，则尝试进入全屏
        if (elem.requestFullscreen) {
          elem.requestFullscreen()
        } else if (elem.mozRequestFullScreen) {
          // Firefox
          elem.mozRequestFullScreen()
        } else if (elem.webkitRequestFullscreen) {
          // Chrome, Safari, Opera
          elem.webkitRequestFullscreen()
        } else if (elem.msRequestFullscreen) {
          // IE/Edge
          elem.msRequestFullscreen()
        }
      } else {
        // 如果当前是全屏状态，则退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          // Firefox
          document.mozCancelFullScreen()
        } else if (document.webkitExitFullscreen) {
          // Chrome, Safari, Opera
          document.webkitExitFullscreen()
        } else if (document.msExitFullscreen) {
          // IE/Edge
          document.msExitFullscreen()
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page-content {
  // position: fixed;
  // bottom: 10px;
  // right: 30px;
  height: 30px;
  text-align: right;
  .el-button {
    padding: 5px;
  }
}
.name {
  margin-bottom: 16px;
}
.pre-box {
  box-sizing: border-box;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  // position: relative;
  overflow: hidden;
  width: 100%; /* 或任何具体值 */
  aspect-ratio: 5 / 3; /* 宽度与高度的比例为 4:3 */
  // max-height: 98vh;
  height: calc(100vh - 40px);
  .ifnull {
    text-align: center;
    position: absolute;
    top: 50%;
    color: gray;
    width: 100%;
    transform: translateY(-50%);
  }
}
.ifnormal {
  width: 100%;
  height: 100%;
}
.bg {
  background: #f5f8fb;
}
</style>
